<!--推广链接ROI-->

<template>
    <el-container>
        <el-header>
            <el-row :gutter="20" class="header-row">
                <el-col :span="6">
                    <el-select v-model="selectedOption" placeholder="请选择">
                        <el-option label="tgadmin-06192049-膳食营养品" value="tgadmin-06192049-膳食营养品"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="manualLoad">手动加载</el-button>
                </el-col>
                <el-col :span="12" class="notice-text">
                    注意：维度变更需要手动执行数据加载
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-card>
                        <template #header>
                            累计用户统计
                        </template>
                        <div>新增用户数：0</div>
                        <div>今日新增：0</div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card>
                        <template #header>
                            总充值数据
                        </template>
                        <div>充值金额：0.00</div>
                        <div>充值笔数：0</div>
                        <div>充值人数：0</div>
                        <div>ARPPU：0</div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card>
                        <template #header>
                            今日充值数据
                        </template>
                        <div>充值金额：0.00</div>
                        <div>充值笔数：0</div>
                        <div>充值人数：0</div>
                        <div>ARPPU：0</div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card>
                        <template #header>
                            利润
                        </template>
                        <div>利润：0</div>
                        <div>总成本：0</div>
                        <div>回报率：0</div>
                    </el-card>
                </el-col>
            </el-row>
        </el-header>

        <el-main>
            <div class="section-title">推广链接实时监测</div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="time" label="时间" width="180"></el-table-column>
                <el-table-column prop="newUserCount" label="今日新增用户数"></el-table-column>
                <el-table-column prop="generalRecharge" label="普通充值(元)">
                    <template v-slot="scope">
                        <div>金额: {{ scope.row.generalRecharge.amount }}</div>
                        <div>人数: {{ scope.row.generalRecharge.people }}</div>
                        <div>笔数: {{ scope.row.generalRecharge.transactions }}</div>
                        <div>客单价: {{ scope.row.generalRecharge.average }}</div>
                        <div>付费率: {{ scope.row.generalRecharge.rate }}%</div>
                    </template>
                </el-table-column>
                <el-table-column prop="vipRecharge" label="会员充值(VIP)">
                    <template v-slot="scope">
                        <div>金额: {{ scope.row.vipRecharge.amount }}</div>
                        <div>人数: {{ scope.row.vipRecharge.people }}</div>
                        <div>笔数: {{ scope.row.vipRecharge.transactions }}</div>
                        <div>客单价: {{ scope.row.vipRecharge.average }}</div>
                        <div>付费率: {{ scope.row.vipRecharge.rate }}%</div>
                    </template>
                </el-table-column>
            </el-table>

            <div class="section-title">每日回收数据</div>
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="日期">
                    <el-date-picker
                            v-model="dateRange"
                            type="daterange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="selectedSubOption" placeholder="请选择">
                        <el-option label="选项1" value="1"></el-option>
                        <el-option label="选项2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch">查询</el-button>
                    <el-button @click="onExport">导出</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="dailyData" style="width: 100%; margin-top: 20px;">
                <el-table-column prop="date" label="日期" width="180"></el-table-column>
                <el-table-column prop="newUserCount" label="新增用户数"></el-table-column>
                <el-table-column prop="totalCost" label="总成本"></el-table-column>
                <el-table-column prop="userCost" label="用户成本"></el-table-column>
                <el-table-column prop="cumulativeRecharge" label="累计充值用户"></el-table-column>
                <el-table-column prop="cumulativeAmount" label="累计充值金额"></el-table-column>
                <el-table-column prop="cumulativeRate" label="累计回报率"></el-table-column>
                <el-table-column prop="d0" label="D0"></el-table-column>
                <el-table-column prop="d1" label="D1"></el-table-column>
                <el-table-column prop="d2" label="D2"></el-table-column>
                <el-table-column prop="d3" label="D3"></el-table-column>
                <el-table-column prop="d4" label="D4"></el-table-column>
            </el-table>
        </el-main>
    </el-container>
</template>

<script setup>
    import { ref } from 'vue';
    import { ElMessage } from 'element-plus';

    const selectedOption = ref('tgadmin-06192049-膳食营养品');
    const selectedSubOption = ref('');
    const tableData = ref([
        {
            time: '2024-06-19 20:49:48',
            newUserCount: 0,
            generalRecharge: {
                amount: '0.00',
                people: 0,
                transactions: 0,
                average: '0.00',
                rate: 0,
            },
            vipRecharge: {
                amount: '0.00',
                people: 0,
                transactions: 0,
                average: '0.00',
                rate: 0,
            },
        },
    ]);

    const dailyData = ref([
        {
            date: '2024-06-21',
            newUserCount: 0,
            totalCost: 0,
            userCost: 0,
            cumulativeRecharge: 0,
            cumulativeAmount: '0.00',
            cumulativeRate: '0%',
            d0: 0,
            d1: 0,
            d2: 0,
            d3: 0,
            d4: 0,
        },
    ]);

    const dateRange = ref([]);

    const onSearch = () => {
        ElMessage.success('查询成功');
    };

    const onExport = () => {
        ElMessage.success('导出成功');
    };

    const manualLoad = () => {
        ElMessage.success('手动加载成功');
    };
</script>

<style scoped>
    .header-row {
        margin-bottom: 20px;
    }

    .notice-text {
        color: red;
        line-height: 36px;
    }

    .section-title {
        margin: 20px 0;
        font-weight: bold;
    }

    .demo-form-inline .el-form-item {
        margin-right: 20px;
    }
</style>
